<template>
  <div id="questionListView">
    <a-form :model="pagination" layout="inline">
      <a-form-item field="questionId" label="题号" style="min-width: 280px">
        <a-input v-model="pagination.questionId" placeholder="请输入题号"/>
      </a-form-item>
      <a-form-item field="language" label="语言" style="min-width: 280px">
        <a-select
            v-model="pagination.language"
            :style="{ width: '200px' }"
            placeholder="请选择编程语言"
            :allow-clear="true"
        >
          <a-option v-for="option in languageOptions" :key="option"
          >{{ option }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-space wrap>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button type="primary" status="warning" @click="handleReset"
          >重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table
        :data="data"
        :pagination="pagination"
        @page-change="changePage"
        column-resizable
        :columns="columns"
        style="margin-bottom: 20px"
    >
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      <template #time="{ record }">
        {{ record.time ?? "N" }}
      </template>
      <template #memory="{ record }">
        {{ record.memory ?? "N" }}
      </template>
      <template #optional="{ record }">
        <a-link v-if="record.userId === loginUser.userId" @click="detail(record)">代码</a-link>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import ProblemUtils from "/src/utils/problem/index"
import {ProblemRecordControllerService} from "../../apis";
import {useStore} from "vuex";
import { Modal } from '@arco-design/web-vue';

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "语言",
    dataIndex: "language",
  },
  {
    title: "状态",
    slotName: "status",
  },
  {
    title: "时间",
    slotName: "time",
  },
  {
    title: "空间",
    slotName: "memory",
  },
  {
    title: "题号",
    dataIndex: "problemId",
  },
  {
    title: "用户",
    dataIndex: "userId",
  },
  {
    title: "提交时间",
    dataIndex: "createTime",
  },
  {
    title: "",
    slotName: "optional",
  }
];
const data = ref([]);
const pagination = ref({
  questionId: "",
  language: "",
  total: 0,
  pageSize: 10,
  pageNum: 1,
});
const languageOptions = ref([]);
const loginUser = ref({})
const store = useStore();

const changePage = (pageNum) => {
  pagination.value.pageNum = pageNum;
  getData();
};
const handleSearch = () => {
  pagination.value.pageNum = 1;
  getData();
};
const handleReset = () => {
  pagination.value.pageNum = 1;
  pagination.value.language = "";
  pagination.value.questionId = "";
  getData();
};

const getData = async () => {
  const res = await ProblemRecordControllerService.list({...pagination.value});
  loginUser.value = await store.dispatch("user/getLoginUser");
  if (res.code === 200) {
    data.value = res.data.records;
    pagination.value.total = res.data.total;
  } else {
    Message.error(res.msg);
  }
};
const detail = (record) => {
  Modal.info({
    title: '你的代码',
    content: record.code
  });
}
const getStatusColor = computed(() => (code) => ProblemUtils.getProblemSubmitStatusEnum(code).color);
const getStatusText = computed(() => (code) => ProblemUtils.getProblemSubmitStatusEnum(code).text);

onMounted(() => {
  getData();
});
</script>

<style scoped>
#questionListView {
  width: 90%;
  margin: 0 auto;
}
</style>
